<template>
  <el-dialog class="link_dialog" width="500px" title="添加链接" :visible.sync="dialogVisible" :close-on-click-modal="false">
    <el-form ref="ruleForm" class="ruleForm" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="链接类型" prop="jumpType">
        <el-select v-model="form.jumpType" placeholder="请选择" @change="resetUrl">
          <el-option label="文本链接" :value="1" />
          <el-option label="商品链接" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item :label="form.jumpType == 1 ? '文本链接' : '商品链接'" prop="jumpUrl">
        <template v-if="form.jumpType == 1">
          <el-input v-model="form.jumpUrl" placeholder="请输入链接" />
        </template>
        <template v-if="form.jumpType == 2">
          <div v-if="form.jumpUrl" class="flex align-center goods_link">
            <p class="flex-1 text-ellipsis">{{ form.goods.title }}</p>
            <span class="color-999 pointer" @click="resetUrl"><i class="el-icon-error" /></span>
          </div>
          <div v-else class="add-div" @click="openSelect">
            <i class="el-icon-plus" />选择商品链接
          </div>
        </template>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="submit">确 定</el-button>
    </div>
    <goods-dialog ref="goodsDialog" dialog-width="1340px" :page-size="12" :append-to-body="true"
      :show-type-select="true" :show-checked-tool="true" @setSelect="setSelect" />
  </el-dialog>
</template>

<script>
import goodsDialog from '@/components/goodsDialog'
// import { checkUrl } from '@/utils/validate'
export default {
  components: { goodsDialog },
  data() {
    const validateUrl = (rule, value, callback) => {
      // if (this.form.jumpType == 1 && !checkUrl(value)) {
      if (this.form.jumpType === 1 && !value) {
        callback(new Error('文本链接不能为空'))
      } else {
        callback()
      }
    }
    return {
      form: {
        jumpType: 1,
        jumpUrl: '',
        goods: {}
      },
      rules: {
        jumpType: [
          { required: true, message: '请选择链接类型', trigger: 'change' }
        ],
        jumpUrl: [
          { required: true, message: '链接不能为空', trigger: 'change' },
          { validator: validateUrl, trigger: 'change' }
        ]
      },
      dialogVisible: false
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.$nextTick(() => {
          this.$refs['ruleForm'].resetFields()
        })
      }
    }
  },
  methods: {
    resetUrl() {
      this.form.jumpUrl = ''
      this.form.goods = {}
    },
    openSelect() {
      this.$refs.goodsDialog.dialogVisible = true
    },
    // 设置选中的商品
    setSelect(goodsList) {
      this.form.goods = goodsList[0]
      this.form.jumpUrl = goodsList[0].goods_id
    },
    submit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.$emit('setVal', this.form)
          this.dialogVisible = false
        } else {
          this.$message({
            message: '请检查表单错误',
            type: 'error'
          })
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.link_dialog {
  .goods_link {
    width: 300px;
    height: 40px;
    padding: 8px;
    border: 1px solid #eeeeee;
  }

  .add-div {
    width: 300px;
    margin-bottom: 0;
    margin-top: 5px;
  }
}
</style>
